%button {
	position: relative;
	min-width: 24px;
	height: 24px;
	padding: 0 11px;
	font-family: var(--font-stack);
	font-size: $font-form-size;
	line-height: 22px;
	text-align: center;
	cursor: pointer;
	border: 1px solid;
	border-radius: 2px;

	@if $ui-transitions {
		transition: color $ui-controls-transition-duration ease-out,
					background-color $ui-controls-transition-duration ease-out,
					border-color $ui-controls-transition-duration ease-out,
					box-shadow $ui-controls-transition-duration ease-out;
	}

	&:empty {
		padding-right: 0;
		padding-left: 0;
	}

	&:active,
	&:focus {
		box-shadow: 0 0 0 2px $btn-focus-outline-color;
		outline: none;
	}

	&.btn-small {
		@extend %button-size-small;

		line-height: 14px;
	}

	&.btn-medium {
		@extend %button-size-medium;

		line-height: 16px;
	}

	&[class^="zi-"], &[class*=" zi-"] {
		@extend %icon-position;

		&:not(:empty) {
			&::before {
				margin-right: 4px;
				margin-left: -6px;
			}
		}
	}
}

%button-size-medium {
	min-width: 18px;
	height: 18px;
}

%button-size-small {
	min-width: 16px;
	height: 16px;
}

%button-colors {
	color: $btn-color;
	background-color: $btn-bg-color;
	border-color: $btn-border-color;

	&:hover {
		color: $btn-color;
		background-color: $btn-hover-bg-color;
		border-color: $btn-hover-border-color;
	}

	&:active,
	&:focus {
		color: $btn-color;
		background-color: $btn-focus-bg-color;
		border-color: $btn-focus-border-color;
	}
}

%button-alt-colors {
	color: $btn-alt-color;
	background-color: $btn-alt-bg-color;
	border-color: $btn-alt-border-color;

	&:hover {
		background-color: $btn-alt-hover-bg-color;
		border-color: $btn-alt-hover-border-color;
	}

	&:active,
	&:focus {
		background-color: $btn-alt-focus-bg-color;
		border-color: $btn-alt-focus-border-color;
	}
}

%button-form-colors {
	color: $btn-form-color;
	background-color: $btn-form-bg-color;
	border-color: $btn-form-border-color;

	&:hover {
		color: $btn-form-color;
		background-color: $btn-form-hover-bg-color;
		border-color: $btn-form-border-color;
	}

	&:active,
	&:focus {
		color: $btn-form-color;
		background-color: $btn-form-hover-bg-color;
		border-color: $btn-form-focus-border-color;
	}
}

%button-icon-colors {
	color: $btn-icon-color;
	background: transparent;
	border: none;

	&:hover {
		color: $btn-icon-hover-color;
		background: transparent;
		border: none;
	}

	&:active,
	&:focus {
		color: $btn-icon-focus-color;
		background: transparent;
		border: none;
	}

	&[disabled] {
		color: $btn-icon-disabled-color;
		background-color: transparent;
	}
}

%button-link-colors {
	color: $link-color;
	background: transparent;
	border-color: $link-color;

	&:hover {
		color: $link-color;
		background: transparent;
		border-color: $link-color;
	}

	&:active,
	&:focus {
		color: $link-color;
		background: transparent;
		border-color: rgba($btn-focus-border-color, .5);
	}
}

%button-disabled {
	&[disabled] {
		pointer-events: none;
		color: $btn-disabled-color;
		background-color: $btn-disabled-bg-color;
		border-color: $btn-disabled-border-color;
		box-shadow: none;
	}
}

button {
	@extend %button;
	@extend %button-colors;
	@extend %button-disabled;

	margin: 0;
}

.btn {
	@extend %button;
	@extend %button-colors;
	@extend %button-disabled;

	display: inline-block;

	&:link,
	&:visited {
		color: $btn-color;
	}
}

.btn-alt {
	@extend %button;
	@extend %button-alt-colors;
	@extend %button-disabled;
}

.btn-grey {
	@extend %button;
	@extend %button-form-colors;
	@extend %button-disabled;
}

.btn-icon {
	@extend %button;
	@extend %button-icon-colors;

	display: inline-block;
	line-height: 24px;

	&:not(:hover):not(:focus) {
		&:link,
		&:visited {
			color: $btn-icon-color;
		}
	}

	&[disabled] {
		pointer-events: none;
	}

	&.btn-small {
		line-height: 16px;
	}
}

.btn-grey-icon {
	@extend %button;
	@extend %button-form-colors;
	@extend %button-disabled;

	&::before {
		color: $icon-color;
	}

	&[disabled]::before {
		color: $btn-icon-disabled-color;
	}
}

.btn-link {
	@extend %button;
	@extend %button-link-colors;

	box-sizing: content-box;
	padding: 0;
	min-width: 1ch;
	height: 14px;
	line-height: 14px;
	vertical-align: baseline;
	border-width: 0 0 1px;
	border-style: dotted;
	border-radius: 0;

	&:active,
	&:focus,
	&:hover {
		border-style: solid;
		box-shadow: none;
	}

	&:active,
	&:focus {
		margin-bottom: -1px;
		border-bottom-width: 2px;
	}

	&[disabled] {
		background-color: transparent;
		border-style: dotted;
	}

	&[class^="zi-"], &[class*=" zi-"] {
		height: 18px;
		border: none;

		&:not(:empty)::before {
			margin-left: 0;
			color: $btn-icon-color;

			@if $ui-transitions {
				transition: color $ui-controls-transition-duration ease-out;
			}
		}

		span {
			border-width: 0 0 1px;
			border-style: dotted;
		}

		&:active,
		&:focus,
		&:hover {
			&::before {
				color: $btn-icon-hover-color;
			}

			span {
				border-style: solid;
				box-shadow: none;
			}
		}

		&:active,
		&:focus {
			margin-bottom: 0;

			&::before {
				color: $btn-icon-focus-color;
			}

			span {
				margin-bottom: -1px;
				border-bottom-width: 2px;
			}
		}

		&[disabled] {
			&::before {
				color: $btn-icon-disabled-color
			}

			span {
				background-color: transparent;
				border-style: dotted;
			}
		}
	}
}

.btn-tag {
	height: auto;
	outline: none;
	border: none;
	box-sizing: content-box;

	&:hover {
		text-decoration: underline;
		background-color: $ui-bg-selected-color;
	}

	&:focus {
		background-color: $ui-bg-selected-color;
	}
}

.btn-overlay-close {
	@extend %button;
	@extend %button-size-medium;
	@extend %button-icon-colors;
	@extend %icon-position;
	@extend %icon-smaller;

	position: absolute;
	top: 1px;
	right: 1px;
	z-index: 1000;

	&::before {
		@extend %icons-font;

		content: $zi-remove;
	}
}

.btn-debug {
	@extend %button;
	@extend %button-form-colors;

	position: fixed;
	bottom: 4px;
	right: 31px;
	z-index: 15000;
	opacity: 0;

	&.visible {
		opacity: 0.75;
	}
}
